<!DOCTYPE html>
<html lang="en">

<head>
    <title>里面#有情人饭局#邀请函</title>
    <#include "/lm/components/meta.html" />
    <#include "/lm/components/stylesheets.html" />
    <link href="/lm/stylesheets/edit.css?v=7" rel="stylesheet">
</head>

<body>
    <img src="https://i.loli.net/2018/08/23/5b7e86417ec96.png" class="am-img-responsive">
    <div class="letter-container">
        <img class="top" src="https://i.loli.net/2018/08/23/5b7e87a52a786.png">
        <div class="letter">
            <div class="indent web-font">
                <span>：</span>
            </div>
            <div class="content web-font" contenteditable="true" id="content">
                <!-- <textarea class="letter-content web-font" rows="7"></textarea> -->
            </div>
            <div class="am-g am-g-collapse letter-bottom">
                <!-- <input type="text" class="bottom-input web-font" maxlength="5" id="toName" /> -->
                <div class="am-u-sm-6 bottom-img">
                    <img src="https://i.loli.net/2018/09/17/5b9e8282c6e9a.png">
                </div>
                <div class="am-u-sm-6 bottom-input-wrap">
                    <input type="text" class="bottom-input web-font" maxlength="5" id="fromName" />
                </div>
                <!-- <img src="https://i.loli.net/2018/08/23/5b7e88760ec5f.png" /> -->
            </div>
            <div class="am-cf"></div>
            <div class="am-g type">
                <!-- 闺蜜局 -->
                <div class="am-u-sm-6"><img src="https://i.loli.net/2018/09/12/5b98aff3e57fc.png" data-src="https://i.loli.net/2018/09/12/5b98aff3e57fc.png" data-selected="https://i.loli.net/2018/09/12/5b98aff3f2b28.png" data-type="1" class="am-img-responsive select-type" /></div>
                <!-- 爷们局 -->
                <div class="am-u-sm-6"><img src="https://i.loli.net/2018/09/12/5b98aff3ecacf.png" data-src="https://i.loli.net/2018/09/12/5b98aff3ecacf.png" data-selected="https://i.loli.net/2018/09/12/5b98aff3f41e8.png" data-type="2" class="am-img-responsive select-type" /></div>
                <!-- 游戏局 -->
                <div class="am-u-sm-6"><img src="https://i.loli.net/2018/09/17/5b9e7f93b6ecd.png" data-src="https://i.loli.net/2018/09/17/5b9e7f93b6ecd.png" data-selected="https://i.loli.net/2018/09/17/5b9e7f93b6326.png" data-type="3" class="am-img-responsive select-type" /></div>
                <!-- 同学局 -->
                <div class="am-u-sm-6"><img src="https://i.loli.net/2018/09/12/5b98aff3e6f87.png" data-src="https://i.loli.net/2018/09/12/5b98aff3e6f87.png" data-selected="https://i.loli.net/2018/09/12/5b98aff4014d4.png" data-type="4" class="am-img-responsive select-type" /></div>
                <!-- 老铁局 -->
                <div class="am-u-sm-6"><img src="https://i.loli.net/2018/09/12/5b98aff3eb40d.png" data-src="https://i.loli.net/2018/09/12/5b98aff3eb40d.png" data-selected="https://i.loli.net/2018/09/12/5b98aff402b08.png" data-type="5" class="am-img-responsive select-type" /></div>
                <!-- 商务局 -->
                <!-- <div class="am-u-sm-6"><img src="https://i.loli.net/2018/09/12/5b98aff3e9add.png" data-src="https://i.loli.net/2018/09/12/5b98aff3e9add.png" data-selected="https://i.loli.net/2018/09/12/5b98b00122533.png" data-type="6" class="am-img-responsive select-type" /></div> -->
                <!-- 说事局 -->
                <div class="am-u-sm-6"><img src="https://i.loli.net/2018/09/16/5b9e6a3f75238.png" data-src="https://i.loli.net/2018/09/16/5b9e6a3f75238.png" data-selected="https://i.loli.net/2018/09/17/5b9e813f0ebed.png" data-type="7" class="am-img-responsive select-type" /></div>
                <!-- 家人局 -->
                <div class="am-u-sm-6 am-u-sm-offset-3 am-u-end"><img src="https://i.loli.net/2018/09/12/5b98aff3e85d5.png" data-src="https://i.loli.net/2018/09/12/5b98aff3e85d5.png" data-selected="https://i.loli.net/2018/09/12/5b98b00120cca.png" data-type="8" class="am-img-responsive select-type" /></div>
            </div>
            <div class="tip">
                <img src="https://i.loli.net/2018/08/27/5b83bc812667c.png" />
            </div>
        </div>
    </div>
    <div class="envelope">
        <div class="submit">
            <img src="https://i.loli.net/2018/08/27/5b83bc8127cd5.png" id="submit-button" />
            <!-- <button class="am-btn am-btn-default" id="submit-button">点击保存</button> -->
        </div>
        <!-- <img src="https://i.loli.net/2018/09/17/5b9f6eff6f95a.png" class="am-img-responsive">
        <img src="https://i.loli.net/2018/09/17/5b9f6eff69886.png" class="am-img-responsive">
        <img src="https://i.loli.net/2018/09/17/5b9f6eff5e18b.png" class="am-img-responsive">
        <img src="https://i.loli.net/2018/09/17/5b9f6eff733a2.png" class="am-img-responsive">
        <img src="https://i.loli.net/2018/09/17/5b9f6eff4a5dc.png" class="am-img-responsive">
        <img src="https://i.loli.net/2018/09/17/5b9f6eff6b50f.png" class="am-img-responsive">
        <img src="https://i.loli.net/2018/09/17/5b9f6eff5b558.png" class="am-img-responsive"> -->
        <img src="https://i.loli.net/2018/09/21/5ba4517f35351.png" class="am-img-responsive">
    </div>
    <#include "/lm/components/scripts.html" />
    <#include "/lm/components/wxConfig.html" />
    <script>
    wx.ready(function() {
        var title = "有话‘里面’说";
        var desc = "某人有话跟你说…";
        var imgUrl = "${img}";
        var link = '${host}/view/${info.code!}';
        initWXShareAll(title, desc, link, imgUrl);
    })
    </script>
    <script>
    var selectedType = 0;

    function clearSelection() {
        selectedType = 0;
        $(".select-type").each(function() {
            $(this).attr("src", $(this).attr("data-src"));
        })
    }
    $(document).ready(function() {
        $(".select-type").click(function() {
            clearSelection();
            selectedType = Number($(this).attr("data-type"));
            $(this).attr("src", $(this).attr("data-selected"));
        })
        $("#submit-button").click(function() {
            var title = "里面#有情人饭局#邀请函";
            var desc = $("#fromName").val() + "有话跟你说…";
            var imgUrl = "${img}";
            var link = '${host}/view/${info.code!}';
            initWXShareAll(title, desc, link, imgUrl);

            var code = "${info.code!}";
            var fromName = $("#fromName").val();
            var toName = $("#toName").val();
            var content = $("#content").text();
            axios.get("/lm/submit", {
                params: {
                    code: code,
                    fromName: fromName,
                    toName: toName,
                    content: content,
                    type: selectedType
                }
            }).then(function(response) {
                console.log(response);
                msg("右上角发给朋友");

            }).catch(function(error) {
                console.log(error);
            }).then(function() {});
        })
    })
    </script>
</body>

</html>